<template>
  <div>
    <header class="my-title">本月账单明细</header>
    <div v-if="!isnone">
      <ul>
        <li v-for="item in recordStore.totalCome" :key="item.id">
          <span>{{ item.name }}</span> <span>{{ item.value }}</span>
          <span class="addtime">{{ item.time }}</span
          ><span class="del" @click="recordStore.deleteData(item.id)">删除</span>
        </li>
      </ul>
      <div>
        <div class="total-c">
          <span>总支出：</span><span>{{ recordStore.numData.outmoney }}</span>
        </div>
        <div class="total-c">
          <span>总收入：</span><span>{{ recordStore.numData.inmoney }}</span>
        </div>
        <div class="total-c">
          <span>汇总：</span><span>{{ recordStore.numData.total }}</span>
        </div>
      </div>
    </div>
    <div v-else class="no-data">
      <p>还没有账单哦</p>
      <p>快去添加你的账单吧</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRecordStore } from '@/store/record'
import { computed } from 'vue'
const recordStore = useRecordStore()
const isnone = computed(() => {
  return recordStore.totalCome.length === 0
})
</script>

<style scoped>
ul {
  list-style: none;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
li {
  height: 40px;
  line-height: 40px;
  span {
    display: inline-block;
    width: 22%;
    text-align: center;
  }
}
.addtime {
  width: 40% !important;
}
.del {
  color: #ff9999;
  cursor: default;
  width: 13% !important;
}
.total-c{
  display: flex;
  padding: 5px 5%;
  justify-content: space-around;
}
.no-data {
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 40px;
}
</style>
